<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>按行显示的二级菜单</title>
    <style>
        /* 清除列表默认样式 */
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        /* 一级菜单容器 */
        .menu {
            text-align: center;
            background-color: #f5f5f5;
            padding: 15px 0;
        }

        /* 一级菜单的每个选项：水平排列 */
        .menu > li {
            display: inline-block;
            margin: 0 20px;
            position: relative;
        }

        /* 一级菜单的链接样式 */
        .menu > li > a {
            text-decoration: none;
            color: #333;
            font-size: 18px;
            padding: 8px 12px;
            border-radius: 4px;
            transition: background-color 0.3s;
        }

        /* 一级菜单hover效果 */
        .menu > li > a:hover {
            background-color: #e0e0e0;
        }

        /* 二级菜单：默认隐藏，确保按行显示 */
        .submenu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: #fff;
            min-width: 150px; /* 固定最小宽度 */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            border-radius: 4px;
            overflow: hidden; /* 确保内容在圆角内 */
        }

        /* 二级菜单的每个选项：强制按行显示 */
        .submenu li {
            display: block; /* 确保每个选项单独占一行 */
        }

        /* 二级菜单的链接样式 */
        .submenu a {
            display: block; /* 让链接占满整个列表项 */
            text-decoration: none;
            color: #333;
            padding: 10px 15px; /* 增加内边距，让每行更明显 */
            transition: background-color 0.3s;
        }

        /* 二级菜单选项hover效果 */
        .submenu a:hover {
            background-color: #f0f0f0;
        }

        /* 显示二级菜单 */
        .menu > li:hover .submenu {
            display: block;
        }
    </style>
</head>
<body>
    <!-- 一级菜单 -->
    <ul class="menu">
        <li>
            <a href="#">奶茶</a>
            <ul class="submenu">
                <li><a href="#">珍珠奶茶</a></li>
                <li><a href="#">红豆奶茶</a></li>
                <li><a href="#">原味奶茶</a></li>
            </ul>
        </li>

        <li>
            <a href="#">果茶</a>
            <ul class="submenu">
                <li><a href="#">1果茶</a></li>
                <li><a href="#">2果茶</a></li>
                <li><a href="#">3果茶</a></li>
            </ul>
        </li>
        <li>
            <a href="#">咖啡</a>
            <ul class="submenu">
                <li><a href="#">美式咖啡</a></li>
                <li><a href="#">拿铁咖啡</a></li>
                <li><a href="#">摩卡咖啡</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>
